<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>魔方</title>
    <link href="css/main.css" rel="stylesheet">
    <script type="text/javascript" src="js/config.js"></script>
    <script type="text/javascript" src="js/vector.js"></script>
    <script type="text/javascript" src="js/block.js"></script>
    <script type="text/javascript" src="js/cube.js"></script>
    <script type="text/javascript" src="js/tool.js"></script>
    <script type="text/javascript" src="js/transform.js"></script>
    <script type="text/javascript" src="js/view.js"></script>
    <script type="text/javascript" src="js/AI.js"></script>
</head>
<body>
<header id="head">魔方</header>
<div class="container">
    <div class="cube">
        <div class="face">
            <div class="surface u">
                <div class="block sb sl" id="u-1"></div>
                <div class="block sb sr" id="u-3"></div>
                <div class="block sf sl" id="u-7"></div>
                <div class="block sf sr" id="u-9"></div>
            </div>
            <div class="surface d">
                <div class="block sf sl" id="d-1"></div>
                <div class="block sf sr" id="d-3"></div>
                <div class="block sb sl" id="d-7"></div>
                <div class="block sb sr" id="d-9"></div>
            </div>
            <div class="surface b">
                <div class="block su sr" id="b-1"></div>
                <div class="block su sl" id="b-3"></div>
                <div class="block sd sr" id="b-7"></div>
                <div class="block sd sl" id="b-9"></div>
            </div>
            <div class="surface f">
                <div class="block su sl" id="f-1"></div>
                <div class="block su sr" id="f-3"></div>
                <div class="block sd sl" id="f-7"></div>
                <div class="block sd sr" id="f-9"></div>
            </div>
            <div class="surface l">
                <div class="block su sb" id="l-1"></div>
                <div class="block su sf" id="l-3"></div>
                <div class="block sd sb" id="l-7"></div>
                <div class="block sd sf" id="l-9"></div>
            </div>
            <div class="surface r">
                <div class="block su sf" id="r-1"></div>
                <div class="block su sb" id="r-3"></div>
                <div class="block sd sf" id="r-7"></div>
                <div class="block sd sb" id="r-9"></div>
            </div>
        </div>
    </div>
</div>
<div class="rotate-btns">
    <button class="rotate-btn btn" id="btn-u">U</button>
    <button class="rotate-btn btn" id="btn-d">D</button>
    <button class="rotate-btn btn" id="btn-r">R</button>
    <button class="rotate-btn btn" id="btn-l">L</button>
    <button class="rotate-btn btn" id="btn-f">F</button>
    <button class="rotate-btn btn" id="btn-b">B</button>
    <button class="rotate-btn btn" id="btn-ur">U`</button>
    <button class="rotate-btn btn" id="btn-dr">D`</button>
    <button class="rotate-btn btn" id="btn-rr">R`</button>
    <button class="rotate-btn btn" id="btn-lr">L`</button>
    <button class="rotate-btn btn" id="btn-fr">F`</button>
    <button class="rotate-btn btn" id="btn-br">B`</button>
    <button class="rotatec-btn btn" id="btn-x">x</button>
    <button class="rotatec-btn btn" id="btn-xr">x`</button>
    <button class="rotatec-btn btn" id="btn-y">y</button>
    <button class="rotatec-btn btn" id="btn-yr">y`</button>
    <button class="rotatec-btn btn" id="btn-z">z</button>
    <button class="rotatec-btn btn" id="btn-zr">z`</button>
</div>
<div class="control-btns">
    <button class="btn" id="btn-break">打乱</button>
    <button class="btn" id="btn-reset">重置</button>
    <button class="btn" id="btn-return" onclick="recover()">一键还原</button>
    <button class="btn" id="btn-step">单步还原</button>
    <button class="btn" id="btn-bottom" onclick="bottomRecover()">底面还原</button>
    <button class="btn" id="btn-top" onclick="topRecover()">顶面还原</button>
    <button class="btn" id="btn-transform" onclick="transformRecover()">移形换位</button>
    <button class="btn" id="btn-quick-test" onclick="quickTest()">快速测试</button>
    <button class="btn" id="btn-quick-ok" onclick="quickOK()">逆向转</button>
</div>
<canvas id="look" class="look" width="405px" height="400px"></canvas>
<label for="pattern">公式</label><textarea id="pattern"></textarea>
<script type="text/javascript">
  let cube
  cube = new Cube()
  cube.init()
  createPaper()
  initViewObj()
  paintCube(cube)

  let rotate_btns = document.getElementsByClassName('rotate-btn')
  for (let i = 0; i < rotate_btns.length; i++) {
    rotate_btns[i].onclick = clickBtn
  }

  let btn_break = document.getElementById('btn-break')
  btn_break.onclick = function () {
    let oplist = 'UDLRFB'
    for (let i = 0; i < 18; i++) {
      let index = getRandom(0, 6)
      cube.rotate(oplist[index])
    }
    paintCube(cube)
  }

  let btn_return = document.getElementById('btn-reset')
  btn_return.onclick = function () {
    cube.init()
    paintCube(cube)
  }

  let rotatec_btns = document.getElementsByClassName('rotatec-btn')
  for (let btn of rotatec_btns) {
    btn.onclick = clickBtn2
  }

  function clickBtn (e) {
    rotateLayer3d(cube, e.target.innerText)
  }

  function clickBtn2 (e) {
    rotateCube3d(cube, e.target.innerText)
  }

  function bottomRecover () {
    let ai = new AI()
    ai.initWith(cube)
    ai.finishBottomFace()
    document.getElementById('pattern').innerText = ai.step.trim()
    rotatePattern3d(cube, ai.step.trim())
  }

  function topRecover () {
    let ai = new AI()
    ai.initWith(cube)
    ai.finishTopFace()
    document.getElementById('pattern').innerText = ai.step.trim()
    rotatePattern3d(cube, ai.step.trim())
  }

  function transformRecover () {
    let ai = new AI()
    ai.initWith(cube)
    ai.transform()
    document.getElementById('pattern').innerText = ai.step.trim()
    rotatePattern3d(cube, ai.step.trim())
  }

  function recover () {
    let ai = new AI()
    ai.initWith(cube)
    ai.finishBottomFace()
    ai.finishTopFace()
    ai.transform()
    document.getElementById('pattern').innerText = ai.step.trim()
    rotatePattern3d(cube, ai.step.trim())
  }

  let ai

  function quickTest () {
    let i = 0
    let timer = setInterval(function () {
      btn_break.click()
      ai = new AI()
      ai.initWith(cube)
      ai.finishBottomFace()
      ai.finishTopFace()
      ai.transform()
      cube.rotatePattern(ai.step.trim())
      paintLook(cube)
      paintCube(cube)
      i++
      if (i >= 256){
        clearInterval(timer)
      }
    }, 1024)
  }

  function quickTest () {
    let pattern = new AI().Pattern['transform']['none']['side']
    cube.rotatePattern(pattern)
    paintLook(cube)
    paintCube(cube)
  }

  function quickOK () {
    let pattern = new AI().Pattern['transform'][ai.pattens[0]][ai.pattens[1]].trim().split(' ')
    for (let i = pattern.length - 1; i >= 0; i--) {
      if (/`/.test(pattern[i])){
        pattern[i] = pattern[i].replace('`','')
      } else{
        pattern[i] +='`'
      }
      cube.rotatePattern(pattern[i])
    }
    paintCube(cube)
    paintLook(cube)
  }
</script>
</body>
</html>